<template>
  <div class="test-view">
    <h1>图标测试页面</h1>
    <p v-role="['admin']">管理员权限可见标签</p>
    
    <div class="icon-test-section">
      <h2>常用图标测试</h2>
      <div class="icon-grid">
        <div class="icon-item">
          <el-icon><House /></el-icon>
          <span>House</span>
        </div>
        <div class="icon-item">
          <el-icon><Setting /></el-icon>
          <span>Setting</span>
        </div>
        <div class="icon-item">
          <el-icon><User /></el-icon>
          <span>User</span>
        </div>
        <div class="icon-item">
          <el-icon><Avatar /></el-icon>
          <span>Avatar</span>
        </div>
        <div class="icon-item">
          <el-icon><Menu /></el-icon>
          <span>Menu</span>
        </div>
        <div class="icon-item">
          <el-icon><Document /></el-icon>
          <span>Document</span>
        </div>
        <div class="icon-item">
          <el-icon><DocumentCopy /></el-icon>
          <span>DocumentCopy</span>
        </div>
        <div class="icon-item">
          <el-icon><Folder /></el-icon>
          <span>Folder</span>
        </div>
        <div class="icon-item">
          <el-icon><Tools /></el-icon>
          <span>Tools</span>
        </div>
        <div class="icon-item">
          <el-icon><Edit /></el-icon>
          <span>Edit</span>
        </div>
        <div class="icon-item">
          <el-icon><Bell /></el-icon>
          <span>Bell</span>
        </div>
        <div class="icon-item">
          <el-icon><ArrowDown /></el-icon>
          <span>ArrowDown</span>
        </div>
        <div class="icon-item">
          <el-icon><Expand /></el-icon>
          <span>Expand</span>
        </div>
        <div class="icon-item">
          <el-icon><Fold /></el-icon>
          <span>Fold</span>
        </div>
        <div class="icon-item">
          <el-icon><SwitchButton /></el-icon>
          <span>SwitchButton</span>
        </div>
      </div>
    </div>

    <div class="button-test-section">
      <h2>按钮图标测试</h2>
      <el-space>
        <el-button type="primary">
          <el-icon><House /></el-icon>
          首页
        </el-button>
        <el-button type="success">
          <el-icon><Setting /></el-icon>
          设置
        </el-button>
        <el-button type="warning">
          <el-icon><User /></el-icon>
          用户
        </el-button>
        <el-button type="danger">
          <el-icon><Bell /></el-icon>
          通知
        </el-button>
      </el-space>
    </div>
  </div>
</template>

<script setup lang="ts">
// 测试页面组件
</script>

<style scoped>
.test-view {
  padding: 20px;
}

.icon-test-section {
  margin: 20px 0;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fff;
}

.icon-item .el-icon {
  font-size: 24px;
  margin-bottom: 8px;
  color: #409eff;
}

.icon-item span {
  font-size: 12px;
  color: #606266;
}

.button-test-section {
  margin: 20px 0;
}

.button-test-section .el-space {
  margin-top: 16px;
}
</style>
